<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #button {
      padding: 8px;
      border-radius: 5px;
      color: white;
      background-color: rgb(0, 132, 255);
    }
    #detail {
      box-sizing: border-box ;
      height: 0px;
      width: 200px;
      color: white;
      background-color: rgb(0, 132, 255);
      border-radius: 5px;
      margin-top: 3px;
      transition: height 1s;
    }
    #detail div {
      padding: 8px;
    }
  </style>
</head>
<body>
  <div>
    <button id="button">展示内容</button>
    <div id="detail">
      <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis praesentium voluptate placeat, 
        fugit doloremque sed, mollitia illo, earum delectus sit quod explicabo aut facilis laudantium laboriosam ipsa commodi quae unde.
      </div>
    </div>
  </div>

  <script>
    const btn = document.getElementById('button')
    const detail = document.getElementById('detail')
    btn.onmouseenter = (e) => {
      detail.style.height = 'auto'
      const { height } = detail.getBoundingClientRect() // 同步重排 1
      detail.style.height = 0
      // detail.style.transition = 'height 1s'
      detail.offsetHeight // 同步重排 2
      /** 收集起来js线程当前轮任务执行完到下一个js红任务进来前调度渲染线程 渲染 **/
      detail.style.height = height + 'px'
      // detail.style.width = 300 + 'px'
      /***/
      new Promise((resolve, reject) => {
        resolve('1')
      }).then(data => console.log(data)) // 微任务也属于当前轮任务，比上面的优先
    }
    btn.onmouseleave = (e) => {
      detail.style.height = 0
    }
  </script>
</body>
</html>